<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        合同信息
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../../../../css/main.css" media="all">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">
    <script type="text/javascript" src="../../../../lib/loading/okLoading.js"></script>
    <link rel="stylesheet" href="../../../../css/bootstrap.css">
    <link rel="stylesheet" href="../../../../lib/layui/css/layui_2.5.7.css">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .layui-table-page select {
            height: 22px;
        }

        /* layui-table 表格内容允许换行 */
        .layui-table-cell {
            height: auto;
        }

        .layui-btn+.layui-btn {
            margin-left: 0px !important;
        }

    </style>
</head>

<body>

    <div class="x-body" id="app" >
        <div class="layui-card-body" >
            <button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>上传文件</button>
            <table class="layui-table" id="test" lay-filter="test">
            </table>
        </div>
    </div>
</body>

<script type="text/html" id="barDemo">

    <a title="下载" lay-event="view" class="ml-5 layui-btn-xs layui-btn layui-btn-normal" style="background-color: #009688">
<!--        <i class="layui-icon icon-myself" id="preImg0">&#xe7a5;</i>-->
        下载
    </a>
    <a title="删除" class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">
        <i class="layui-icon">&#xe640;</i>
    </a>
</script>


<script type="text/javascript" src="../../../../js/jquery.min.js"></script>
<script type="text/javascript" src="../../../../js/myAjax.js"></script>
<script type="text/javascript" src="../../../../js/pub.js"></script>
<script type="text/javascript" src="../../../../lib/layui/layui2.5.7.js"></script>
<script type="text/javascript" src="../../../../js/vue.min.js"></script>
<!-- <script src="lib/layui/layui.js" charset="utf-8"></script> -->
<script src="../../../../js/x-layui.js" charset="utf-8"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>


<script>

    var contractId = getQueryVariable("contractId");

    layui.use(['table','upload', 'element', 'laypage', 'layer', 'form', 'laytpl'], function () {
        $ = layui.jquery;//jquery
        laypage = layui.laypage;//分页
        layer = layui.layer;//弹出层
        laytpl = layui.laytpl;
        upload = layui.upload;
        var table = layui.table;
        var form = layui.form;
        okLoading.close($);
        getCustomer();
        getProject();

        //方法级渲染
        var t1 = table.render({
            elem: '#test',
            url: $baseUrl + 'xa/contractFile/findContractFileListByContractId',
            where: {
                userId: $userId,
                contractId: contractId
            },
            headers: {
                token: $token
            }
            // , toolbar: '#toolbarDemo'

            // toolbar: true,
            , cols: [
                [
                    {
                        title: '序号',
                        type:'numbers',
                        width: '10%',
                        fixed: 'left',
                    },
                    {
                        field: 'fileName',
                        title: '文件名称',
                        align: 'center',
                        // templet(item) {
                        //     if (item.contractNature === 1) {
                        //         return '<button type="button" class="layui-btn layui-btn-xs layui-btn layui-btn-xs layui-btn-radius layui-btn">收款</button>';
                        //     } else if (item.contractNature === 2) {
                        //         return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-warm">付款</button>';
                        //     }else {
                        //         return '<button type="button" class="layui-btn layui-btn-xs layui-btn-radius layui-btn-danger">未知</button>';
                        //     }
                        //
                        // }
                    },

                    {
                        field: 'createTime',
                        title: '添加日期',
                        align: 'center',
                        width: '25%',
                        sort: true
                    },
                    {
                        // field: 'status',
                        title: '操作',
                        templet: '#barDemo',
                        width: '15%',
                        fixed: 'right',
                        align: 'center',

                    }]
            ],
            response: {
                statusName: 'code' //规定数据状态的字段名称，默认：code
                ,
                statusCode: 0 //规定成功的状态码，默认：0
                ,
                msgName: 'msg' //规定状态信息的字段名称，默认：msg
                ,
                countName: 'total' //规定数据总数的字段名称，默认：count
                ,
                dataName: 'data', //规定数据列表的字段名称，默认：data
            },
            id: 'test',
            page: false,
            limit: Number.MAX_VALUE,
            height: 'auto',
            even: true,
            done: function (res, curr, count) {
                //是否有权限或权限是否失效
                // authorizeState();
                // this.statisticsFun();
                //解决操作栏因为内容过多换行问题
                $(".layui-table-main tr").each(function (index, val) {
                    $($(".layui-table-fixed-l .layui-table-body tbody tr")[index]).height($(val).height());
                    $($(".layui-table-fixed-r .layui-table-body tbody tr")[index]).height($(val).height());
                });

            }
        });

        //指定允许上传的文件类型
        var upFileName = '';
        upload.render({
            elem: '#test3'
            ,url:baseHead + "/other/fileUpload1"//改成您自己的上传接口
            ,headers: {
                "token": $token,
            }
            ,data: {
                userId: $userId,
            }
            ,accept: 'file' //普通文件
            ,choose:function (obj) {
                obj.preview(function (index, file, result) {
                    // console.info(file.name);
                    upFileName = file.name;
                });

            }
            ,done: function(res){

                if (res.code === 0) {

                    let request = {
                        url: "xa/contractFile/addContractFile/",
                        data: {
                            userId: $userId,
                            contractId: contractId,
                            fileName:upFileName,
                            fileUrl:res.data
                        },
                        method: "POST",
                    };
                    sendRequest(request, (data) => {
                        if (data.code === 0) {
                            layer.msg("添加成功", {
                                icon: 1
                            });
                            t1.reload();
                        } else {
                            layer.msg("添加失败，请稍后再试！", {
                                icon: 5
                            });
                        }
                        // if (data.code === 0) {
                        //     layer.alert("操作成功", {
                        //             icon: 6
                        //         };
                        //         t1.reload();
                        //         // function () {
                        //         //
                        //         //     var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        //         //     parent.location.reload();//刷新父页面，注意一定要在关闭当前iframe层之前执行刷新
                        //         //     parent.layer.close(index); //再执行关闭
                        //         //
                        //         //
                        //         // });
                        // } else {
                        //     layer.alert(data.msg, {
                        //         icon: 5
                        //     })
                        // }
                    });
                } else {
                    layer.alert(res.msg, {
                        icon: 2
                    });
                }
            }
        });



        form.on('submit(sreach)', function(data) {
            var contractNature = data.field.contractNature;
            var contractType = data.field.contractType;
            var customerId = data.field.customerId;
            var projectId = data.field.projectId;
            
            var delFlag = data.field.delFlag;
            var contractNum = data.field.contractNum;
            var signStart = data.field.signStart;
            var signEnd = data.field.signEnd;
            var createStart = data.field.createStart;
            var createEnd = data.field.createEnd;

            table.reload('test', {
                where: { //设定异步数据接口的额外参数，任意设
                    contractNature: contractNature,
                    contractType: contractType,
                    customerId: customerId,
                    projectId: projectId,
                    delFlag:delFlag,
                    contractNum: contractNum,
                    startSignTime: signStart,
                    endSignTime: signEnd,
                    startCreateTime: createStart,
                    endCreateTime: createEnd
                },
            });
            return false;
        })

        //监听工具条
        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            let data = obj.data; //获得当前行数据
            let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            if (layEvent === 'del') { //删除
                layer.confirm('是否确认删除 ？', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    let request = {
                        url: "xa/contractFile/delById/" + data.id,
                        data: {
                            userId: $userId,
                        },
                        method: "DELETE",
                    };
                    sendRequest(request, (data) => {
                        if (data.code === 0) {
                            layer.msg("删除成功", {
                                icon: 1
                            });
                            t1.reload();
                        } else {
                            layer.msg("删除失败，请稍后再试！", {
                                icon: 5
                            });
                        }
                    });
                    layer.close(index);
                });
            } else if (layEvent === 'view') { //详情
                // var fileName = data.fileName.split('.')[0]
                window.location.href = baseHead+"/other/downLoadFile?id="+data.fileUrl + '&userId='+ $userId + '&fileName=' + data.fileName
                // admin_add('付款合同详情', 'payment_contract_detail.html?contractId=' + data.id)
                
                
            }
        });

    });

    function getCustomer(){
        $.ajax({
        	type:"get",
            url:baseHead + "xa/customer/list",
            data:{
                userId :$userId
            },
            headers: {
                token: $token
            },
            success:function(res){
               	if(res.code === 0){
                    for(var i =0;i < res.data.length;i++){
                        $("#customerId").append("<option value=\""+res.data[i].id+"\">"+res.data[i].name+"</option>");
                    }
                    //重新渲染
                    layui.form.render("select");
                }else{
                    layer.msg(res.message);
                }
            }
        });
    }

    function getProject(){
        // document.getElementById("projectId").innerHTML = "";
        $.ajax({
        	type:"get",
            url:baseHead + "xa/project/list",
            data:{
                userId :$userId
            },
            headers: {
                token: $token
            },
            success:function(res){
               	if(res.code == 0){
                    // $("#projectId").append("<option value=''>请选择关联项目</option>");
                    for(var i =0;i < res.data.length;i++){
                        $("#projectId").append("<option value=\""+res.data[i].id+"\">"+res.data[i].name+"</option>");
                    }
                    //重新渲染
                    layui.form.render("select");
                }else{
                    layer.msg(res.message);
                }
            }
        });
    };

    function reload(value) {
        table.reload('test', {
            where: {
                // name: $("input[name=name]").val(),
                // taxpayerIdentificationNumber: $("input[name=taxpayerIdentificationNumber]").val(),
                // addressAndTelephoneNumber: $("input[name=addressAndTelephoneNumber]").val(),
                // billType: $("select[name=billType]").val(),
                // start: $("input[name=start]").val(),
                // end: $("input[name=end]").val(),
            }
        });
    }

    function admin_add(title, url, w, h) {
        x_admin_show(title, url, w, h);
    }
</script>

<script>

    var vm = new Vue({
        el: "#app",
        data: {
            statistics: {
                collectionTotalAmount: null,
                collectionHappenAmount: null,
                collectionNoHappenAmount: null,
                collectionInvoiceAmount: null,
                collectionContract: null,
                paymentTotalAmount: null,
                paymentHappenAmount: null,
                paymentNoHappenAmount: null,
                paymentInvoiceAmount: null,
                paymentContract: null,
            }
            // statistics: {
            //     collectionContract: null,
            //     paymentContract: null,
            //     totalCollection: {

            //     },
            //     totalPayment: {

            //     }
            // }
        },
        mounted() {
            this.statisticsFun();
        },
        methods: {
            statisticsFun() {
                let request = {
                    url: 'xa/contractInfo/findDataStatistical',
                    data: {
                        userId: $userId,
                    },
                    method: "GET",
                };
                sendRequest(request, (res) => {
                    // this.statistics = res.data
                    this.statistics.collectionTotalAmount = res.data.totalCollection.contract_total_amount,
                    this.statistics.collectionHappenAmount = res.data.totalCollection.contract_happen_amount,
                    this.statistics.collectionNoHappenAmount = res.data.totalCollection.contract_no_happen_amount,
                    this.statistics.collectionInvoiceAmount = res.data.totalCollection.contract_invoice_amount,
                    this.statistics.collectionContract = res.data.collectionContract,
                    this.statistics.paymentTotalAmount = res.data.totalPayment.contract_total_amount,
                    this.statistics.paymentHappenAmount = res.data.totalPayment.contract_happen_amount,
                    this.statistics.paymentNoHappenAmount = res.data.totalPayment.contract_no_happen_amount,
                    this.statistics.paymentInvoiceAmount = res.data.totalPayment.contract_invoice_amount,
                    this.statistics.paymentContract = res.data.paymentContract
                });
            }
        }

    });


    // setTimeout(() => {
    //     //修改状态
    //     let form = layui.form;
    //     //查发票类型
    //     let request = {
    //         url: 'dictionary/findDataDictionaryValue',
    //         data: {
    //             userId: $userId,
    //             label: 'INVOICE_TYPE'
    //         },
    //         method: "POST",
    //     };
    //     sendRequest(request, (res) => {
    //         console.log(res);
    //         let billType = res.data;
    //         $.each(billType, function (index, item) {
    //             let opt = $("<option value=" + item + ">" + item + "</option>");
    //             $("select[name=billType]").append(opt);
    //             console.log(opt)

    //         });


    //         form.render('select');
    //     });
    // }, 300)
</script>

</html>
